<template>
  <div>
    <van-nav-bar
      :title="processInfo.processName"
      left-arrow
      @click-left="$router.back()"
    />
    <div v-for="(value, key) in tables['$$root']['columns']" :key="key">
      <van-field
        :label="key"
        placeholder="提示性文字"
        required
        clearable
        :label-width="50"
      />
    </div>
  </div>
</template>

<script>
import { definition, processInfo } from '@/api/bpm/task'
export default {
  data() {
    return {
      processInfo: {},
      tables: {}
    }
  },
  async created() {
    const res = await processInfo(this.$route.params.taskId)
    this.processInfo = res

    const formIdentity = this.processInfo.form,
      viewModel = this.processInfo.viewModel || {},
      actions = this.processInfo.actions || [],
      validationGroups = actions.length ? actions[0].validationGroup : null,
      form = {}

    const formRes = await definition(formIdentity.formId)

    //YZSoft.src.ux.RuntimeClass => createRuntimeClass
    const regClassName = new RegExp('Ext.define\\s*\\(\\s*[\'"]([^\'"]*)[\'"]'),
      match = regClassName.exec(formRes.src),
      className = match && match[1]

    if (className) {
      //   Ext.raise({
      //     msg: RS.$('All_Form_RuntimeClass_Err_MissClassDefine')
      //   })
      this.createViewModel(viewModel)
    }
  },
  methods: {
    createViewModel(viewModel) {
      const schema = viewModel.schema,
        data = viewModel.data,
        formulars = viewModel.formulars || {},
        readOnly = viewModel.readOnly

      this.createSchema(schema, data)
      //this.buildSchemaTree(this.tables['$$root'])
      this.rootTable(this.tables['$$root'], [data] || {})
      console.log(this.tables)
    },
    rootTable(table, rows) {
      table.rows = []
      for (let i = 0; i < rows.length; i++) {
        table.rows.push(rows[i])

        Object.keys(table.tables).forEach((key) => {
          this.rootTable(table.tables[key], rows[i][key])
        })
      }
    },
    buildSchemaTree(table) {
      console.log(table)
    },
    createSchema(schema, data) {
      let tables = (this.tables = JSON.parse(JSON.stringify(schema)) || {})

      Object.keys(tables).forEach((key) => {
        tables[key].columns = tables[key].columns || {}
        tables[key].tables = tables[key].tables || {}
      })

      this.parseTableSchema('$$root', data)

      //给所有table加上tableName也就是key
      Object.keys(tables).forEach((tableName) => {
        const table = tables[tableName]
        table.tableName = tableName

        Object.keys(table.columns).forEach((columnName) => {
          const column = table.columns[columnName]
          column.parentTable = table
        })
      })
      //console.log('result', this.tables)
    },
    parseTableSchema(tableName, data) {
      let datas = Array.isArray(data) ? data : [data],
        table = (this.tables[tableName] = this.tables[tableName] || {}),
        columns = (table.columns = table.columns || {}),
        tables = (table.tables = table.tables || {})

      datas.forEach((data) => {
        Object.keys(data).forEach((columnName) => {
          const value = data[columnName]
          if (Array.isArray(value) && typeof value[0] === 'object') {
            tables[columnName] = this.parseTableSchema(columnName, value)
          } else {
            if (!columns[columnName]) {
              columns[columnName] = {
                columnName: columnName
              }
            }
          }
        })
      })
      return table
    }
  }
}
</script>